<template>
  <view>
    <!-- 姓名输入框 -->
    <input 
      type="text" 
      placeholder="请输入姓名" 
      v-model="formData.name"
      class="input-field"
    />
    
    <!-- 联系方式输入框 -->
    <input 
      type="number" 
      placeholder="请输入手机号" 
      v-model="formData.phone"
      class="input-field"
    />

    <!-- 跳转至预约页并传递参数 -->
    <button @click="toAppointmentPage" class="submit-btn">
      选择预约时间
    </button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 引入路由

const router = useRouter(); 
const formData = ref({
  name: '',
  phone: '',
  ctype: 5, // 固定参数
  cid: 222, // 固定参数
});

const toAppointmentPage = () => {
  // 校验必填字段
  if (!formData.value.name || !formData.value.phone) {
    uni.showToast({ title: '请填写姓名和手机号', icon: 'none' });
    return;
  }

  // **优化点：仅传递必要参数（避免url过长）**
  router.push({
    path: '/pages/appointment/appointment', 
    query: {
      name: formData.value.name,
      phone: formData.value.phone,
      ctype: formData.value.ctype,
      cid: formData.value.cid
    }
  });
};
</script>

<style scoped lang="scss">
.input-field {
  width: 100%;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-bottom: 30rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #1d85b5;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
}
</style>